<template>
  <div class="moodpage">
    <Header></Header>
    <div class="banner"></div>
    <div class="all-talk body-main">
      <div class="talk-item main-item-card">
        <div class="talk-info">
          <div class="user-avater">
            <img
              :src="parentMood.uavater"
              alt="用户头像"
              @click="See(parentMood.uaddress)"
            />
          </div>
          <div class="user-detail">
            <div class="user-nickname">
              <a :href="parentMood.uaddress">{{ parentMood.uname }}</a>
            </div>
            <div class="time">{{ parentMood.mtime }}</div>
            <div class="talk-content">
              {{ parentMood.mbody }}
            </div>
            <div class="talk-operation">
              <div
                class="HeartAnimation mouseCursorLink"
                title="点赞"
                @click="moodLike(0)"
              ></div>
              <span>{{ parentMood.mlike }}</span>
              <span class="mouseCursorLink">回复</span>
            </div>
            <div class="talk-info replay">
              <div class="user-avater">
                <img :src="user_avater" alt="用户头像" />
              </div>
              <div class="user-detail">
                <textarea
                  data-v-27effb30=""
                  placeholder="留下点什么吧..."
                  auto-grow=""
                  dense=""
                  class="comment-textarea"
                ></textarea>
                <button @click="moodSubmit(0, parentMood.uid)">提交</button>
              </div>
            </div>
            <div
              class="talk-info"
              v-for="(item, index) in sonMood"
              :key="index"
            >
              <div class="user-avater">
                <img
                  :src="item.uavater"
                  alt="用户头像"
                  @click="See(item.uaddress)"
                />
              </div>
              <div class="user-detail">
                <div class="user-nickname">
                  <a :href="item.uaddress">{{ item.uname }}</a>
                </div>
                <div class="time">{{ item.mtime }}</div>
                <div class="talk-content">
                  <a :href="item.paddress">@{{ item.pname }}</a>
                  {{ item.mbody }}
                </div>
                <div class="talk-operation">
                  <div
                    class="HeartAnimation mouseCursorLink"
                    title="点赞"
                    @click="moodLike(index + 1)"
                  ></div>
                  <span>{{ item.mlike }}</span>
                  <span class="mouseCursorLink">回复</span>
                </div>
                <div class="talk-info replay">
                  <div class="user-avater">
                    <img :src="user_avater" alt="用户头像" />
                  </div>
                  <div class="user-detail">
                    <textarea
                      data-v-27effb30=""
                      placeholder="留下点什么吧..."
                      auto-grow=""
                      dense=""
                      class="comment-textarea"
                    ></textarea>
                    <button @click="moodSubmit(index + 1, item.uid)">
                      提交
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
// @ is an alias to /src
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import $ from 'jquery'

export default {
  name: 'MoodPageView',
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      parentMood: {},
      sonMood: [],
      user_avater:
        'https://static.talkxj.com/photos/0bca52afdb2b9998132355d716390c9f.png',
      user: {},
    }
  },
  methods: {
    getComment() {
      let mid = this.$route.params.id
      this.$api.mood
        .getMood(mid)
        .then((res) => {
          // console.log(res.data.data)
          this.parentMood = res.data.data[0][0]
          this.sonMood = res.data.data[1].map((v) => {
            let pid = v.replay_uid
            if (pid == this.parentMood.uid) {
              v.pname = this.parentMood.uname
              v.paddress = this.parentMood.uaddress
              return v
            } else {
              res.data.data[1].forEach((s) => {
                if (s.uid == pid) {
                  // console.log(pid, s.uid)
                  v.pname = s.uname
                  v.paddress = s.uaddress
                  // console.log(v)
                }
              })
              return v
            }
          })
        })
        .catch((err) => {
          console.log(err)
          this.$message({
            message: '网页发生了错误！',
            type: 'error',
          })
        })
    },
    letShow() {
      $('span.mouseCursorLink').click(function () {
        // console.log(this)
        if ($(this).parent().next().hasClass('show')) {
          $('div.show').removeClass('show')
        } else {
          $('div.show').removeClass('show')
          $(this).parent().next().toggleClass('show')
        }
      })
    },
    moodSubmit(btn, uid) {
      // console.log(this.sonMood)
      if (!this.user.id) {
        this.$message.error('请先登录再评论！')
        return
      }
      let text = $('textarea').eq(btn).val()
      if (!text) {
        this.$message.error('内容不能为空！请输入评论')
        return
      }
      let date = new Date()
      let time = `${date.getFullYear()}/${
        date.getMonth() + 1
      }/${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
      const params = {
        parent_mid: this.$route.params.id,
        replay_uid: uid,
        mtime: time,
        mbody: text,
        uid: this.$store.getters.user.id,
        mlike: 0,
      }
      // console.log(params)

      this.$api.mood
        .addMoodPage(params)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success('回复成功！')
            setTimeout(() => {
              location.reload()
            }, 500)
          } else {
            this.$message.err('???怎么不能回复啊')
          }
        })
        .catch((err) => {
          console.log(err)
          this.$message({
            message: '???网页怎么出问题了',
            type: 'error',
          })
        })
    },
    setUser() {
      return this.$store.getters.user
    },
    moodLike(index) {
      let $dz = $('div.HeartAnimation').eq(index)
      if ($dz.hasClass('like-active')) {
        var i = -1
      } else {
        var i = 1
      }
      const params = {}
      if (index == 0) {
        this.parentMood.mlike = parseInt(this.parentMood.mlike) + i
        params.id = this.parentMood.mid
        params.like = this.parentMood.mlike
      } else {
        this.sonMood[index - 1].mlike =
          parseInt(this.sonMood[index - 1].mlike) + i
        params.id = this.sonMood[index - 1].mid
        params.like = this.sonMood[index - 1].mlike
      }
      this.$api.mood
        .moodLike(params)
        .then((res) => {
          if (res.data.code == 200) {
            if (i == 1) {
              this.$message.success('点赞成功！')
            } else {
              this.$message.success('取消点赞成功！')
            }
          } else {
            this.$message.err('???怎么不能点赞啊')
          }
        })
        .catch((err) => {
          console.log(err)
          this.$message({
            message: '???网页怎么出问题了',
            type: 'error',
          })
        })
      $dz.toggleClass('like-active')
    },
  },
  created() {
    this.getComment()
    this.user = this.setUser()
    if (this.user.avater) this.user_avater = this.user.avater
  },
  updated() {
    this.letShow()
  },
}
</script>

<style lang="scss" scoped>
.moodpage {
  background-color: var(--main-bg);
  color: var(--main-color);
  a {
    color: var(--main-color);
    transition: color 0.3s;
    &:hover {
      color: var(--head-color);
    }
  }
  .banner {
    background: url('http://47.113.189.57:5000/mood/2.jpg') center no-repeat;
    background-size: cover;
    min-height: 400px;
  }
  .talk-item {
    // padding: 2em;
    box-shadow: 0 0 0;
    &:hover {
      transform: translate(0);
      box-shadow: 0 0 0;
    }
  }
  .user-detail {
    // align-items: flex-start;
    > .talk-info {
      margin-top: 1em;
      width: 100%;
      padding: 20px;
    }
    > .talk-content {
      > a {
        font-weight: bold;
      }
    }
    > .talk-operation {
      position: relative;
      margin-top: 1em;
      > span:nth-child(2) {
        display: block;
        margin: 0 2em;
      }
      > span:last-child {
        color: darkcyan;
      }
    }
    > .replay {
      height: 0;
      overflow: hidden;
      transition: height 0.3s, box-shadow 0.3s, padding 0.3s;
      padding: 0px;
      border-radius: 5px;
      > .user-detail {
        align-items: flex-end;
      }
    }
    > .show {
      height: 11.5em !important;
      box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.15);
      padding: 10px;
    }
  }
}
.HeartAnimation {
  margin: 0 0 0 -44px;
}
</style>
